<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>themes</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>

<div class="top"></div>
<nav>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-3">
                <a href="">Themes</a>
            </div>
            <div class="col-md-6 col-9">
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-3 col-4"><a href="">Themes</a></div>
                    <div class="col-md-3 col-4"><a href="">About</a></div>
                    <div class="col-md-3 col-4"><a href="">FAQ</a></div>
                </div>
            </div>
        </div>
    </div>
</nav>


<header>
    <div class="container">
        <div class="h-top">
            <div class="row text-center">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <span>B</span>
                    <h1>Themes</h1>
                    <p>Customize and extend</p>
                    <a href="">Explore</a>
                </div>
                <div class="col-md-4"></div>
            </div>
        </div>
        <div class="h-bottom">
            <div class="row text-center">
                <div class="col-md-4">
                    <img src="img/yi_03.png" alt="">
                    <h6>Components and examples</h6>
                    <p>Each theme features new components</p>
                </div>
                <div class="col-md-4">
                    <img src="img/er_03.png" alt="">
                    <h6>Tons of variables</h6>
                    <p>Theme components inherit much</p>
                </div>
                <div class="col-md-4">
                    <img src="img/san_03.png" alt="">
                    <h6>Source files and tools</h6>
                    <p>Each theme inherit components</p>
                </div>
            </div>
        </div>
    </div>
</header>


<main>
    <div class="container">
        <div class="text-center">
            <h5>Team</h5>
        </div>
       <div class="row text-center mt-5">
           <div class="col-md-4">
               <div class="card">
                   <div class="banner1"><img src="img/avatar-fat.jpg" alt=""></div>
                   <div class="card-body">
                       <h5 class="card-title">Jacob Thornton</h5>
                       <p class="card-text" title="Creator of Bootstrap,engineer at Twitter & Medium.Founder of Bumpers">Creator of Bootstrap,engineer at Twitter & Medium.Founder of Bumpers</p>
                       <a href="#" class="btn btn-primary">viwe GitHub</a>
                   </div>
               </div>
           </div>
           <div class="col-md-4">
               <div class="card">
                   <div class="banner2"><img src="img/avatar-mdo.jpg" alt=""></div>
                   <div class="card-body">
                       <h5 class="card-title">Mark Otto</h5>
                       <p class="card-text" title="Design at GitHub.Creator of Bootstrap.Previously at Twitter.Huge nerd.">Design at GitHub.Creator of Bootstrap.Previously at Twitter.Huge nerd.</p>
                       <a href="#" class="btn btn-primary">viwe GitHub</a>
                   </div>
               </div>
           </div>
           <div class="col-md-4">
               <div class="card">
                   <div class="banner3"><img src="img/avatar-dhg.png" alt=""></div>
                   <div class="card-body">
                       <h5 class="card-title">Dave Gamache</h5>
                       <p class="card-text" title="Design at Twitter & Medium.Starting something new soon.">Design at Twitter & Medium.Starting something new soon.</p>
                       <a href="#" class="btn btn-primary">viwe GitHub</a>
                   </div>
               </div>
           </div>
       </div>
    </div>
</main>
<div class="banner">
    <div class="container">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 text-left">
                        <h5 class="card-title">C'mon,check out the themes!</h5>
                        <p class="card-text">Now you know what we're about,so peep the goods!</p>
                    </div>
                    <div class="col-md-6 text-right"><a href="#" class="btn btn-primary">Explore</a></div>
                </div>

            </div>
        </div>
    </div>
</div>


<footer>
    <div class="container">
        <div class="row text-center">
            <div class="col-md-4"></div>
            <div class="col-md-6">
                <ul class="list-unstyled">
                    <li><a href="">About</a></li>
                    <li><a href="">Terms</a></li>
                    <li><a href="">Privacy</a></li>
                    <li><a href="">Licenses</a></li>
                    <li><a href="">FAQ</a></li>
                    <li><a href="">Bootstrap</a></li>
                </ul>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</footer>







<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umb/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>